<template>
  <div class="inbound-record-container">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <el-form 
        :model="searchForm" 
        :inline="true" 
        class="search-form"
        label-width="100px"
      >
        <el-form-item label="客户代码">
          <el-input
            v-model="searchForm.customerCode"
            placeholder="请输入客户代码"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        
        <el-form-item label="产品名称">
          <el-input
            v-model="searchForm.productName"
            placeholder="请输入产品名称"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        
        <el-form-item label="物料编码">
          <el-input
            v-model="searchForm.materialCode"
            placeholder="请输入物料编码"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        
        <el-form-item label="业务员">
          <el-select
            v-model="searchForm.salesperson"
            placeholder="请选择业务员"
            clearable
            filterable
            remote
            reserve-keyword
            :remote-method="handleSalespersonSearch"
            :loading="salespersonLoading"
            style="width: 180px"
          >
            <el-option 
              v-for="person in salespersonOptions" 
              :key="person.value" 
              :label="person.label"
              :value="person.value" 
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="含税">
          <el-select
            v-model="searchForm.isTaxIncluded"
            placeholder="请选择"
            clearable
            style="width: 120px"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="客户名称">
          <el-input
            v-model="searchForm.customerName"
            placeholder="请输入客户名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        
        <el-form-item label="出货日期">
          <el-date-picker
            v-model="searchForm.deliveryDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        
        <el-form-item label="供应商">
          <el-select
            v-model="searchForm.supplier"
            placeholder="请选择供应商"
            clearable
            filterable
            remote
            reserve-keyword
            :remote-method="handleSupplierSearch"
            :loading="supplierLoading"
            style="width: 200px"
          >
            <el-option 
              v-for="supplier in supplierOptions" 
              :key="supplier.value" 
              :label="supplier.label"
              :value="supplier.value" 
            />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleSearch"
            :loading="loading"
          >
            <i class="fas fa-search"></i>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <i class="fas fa-redo"></i>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据列表区域 -->
    <el-card class="table-card" shadow="never">
      <!-- 表头标题 -->
      <div class="table-header">
        <div class="table-title">
          <i class="fas fa-history"></i>
          入库记录列表
        </div>
        <div class="table-actions">
          <el-button 
            type="info" 
            @click="handleExport"
          >
            <i class="fas fa-file-excel"></i>
            导出数据
          </el-button>
        </div>
      </div>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        border
        style="width: 100%"
        :scroll="{ x: 3200 }"
      >
        <el-table-column prop="orderDate" label="订单日期" width="110" align="center" fixed="left" />
        
        <el-table-column prop="customerCode" label="客户代码" width="120" show-overflow-tooltip />
        
        <el-table-column prop="salesperson" label="业务员" width="100" show-overflow-tooltip />
        
        <el-table-column prop="isTaxIncluded" label="是否含税" width="90" align="center">
          <template #default="{ row }">
            <el-tag :type="row.isTaxIncluded ? 'success' : 'info'" size="small">
              {{ row.isTaxIncluded ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="orderArea" label="订单面积" width="100" align="right">
          <template #default="{ row }">
            {{ formatArea(row.orderArea) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="pricePerSquareMeter" label="平米价" width="100" align="right">
          <template #default="{ row }">
            ¥{{ formatCurrency(row.pricePerSquareMeter) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="internalCode" label="厂内编号" width="120" show-overflow-tooltip />
        
        <el-table-column prop="outsourceSupplier" label="外发供应商" width="150" show-overflow-tooltip />
        
        <el-table-column prop="productName" label="产品名称" width="180" show-overflow-tooltip />
        
        <el-table-column prop="materialCode" label="物料编码" width="120" show-overflow-tooltip />
        
        <el-table-column prop="purchaseOrderNo" label="采购订单号" width="140" show-overflow-tooltip />
        
        <el-table-column prop="layerCount" label="层数" width="80" align="center" />
        
        <el-table-column prop="boardThickness" label="板厚" width="80" align="center" />
        
        <el-table-column prop="surfaceTreatment" label="表面处理" width="120" show-overflow-tooltip />
        
        <el-table-column prop="solderMask" label="阻焊" width="100" show-overflow-tooltip />
        
        <el-table-column prop="silkscreen" label="字符" width="100" show-overflow-tooltip />
        
        <el-table-column prop="substrate" label="板材" width="120" show-overflow-tooltip />
        
        <el-table-column prop="deliverySize" label="交货尺寸(mm)" width="130" show-overflow-tooltip />
        
        <el-table-column prop="panelization" label="拼版" width="100" show-overflow-tooltip />
        
        <el-table-column prop="innerCopper" label="内铜" width="80" show-overflow-tooltip />
        
        <el-table-column prop="outerCopper" label="外铜" width="80" show-overflow-tooltip />
        
        <el-table-column prop="viaProcess" label="过孔工艺" width="120" show-overflow-tooltip />
        
        <el-table-column prop="testing" label="测试" width="100" show-overflow-tooltip />
        
        <el-table-column prop="testFixtureFee" label="测试架费" width="100" align="right">
          <template #default="{ row }">
            ¥{{ formatCurrency(row.testFixtureFee) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="urgent" label="加急" width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="row.urgent ? 'danger' : 'info'" size="small">
              {{ row.urgent ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="quantity" label="数量" width="100" align="right" />
        
        <el-table-column prop="unitPrice" label="单价" width="100" align="right">
          <template #default="{ row }">
            ¥{{ formatCurrency(row.unitPrice) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="sampleFee" label="样板费" width="100" align="right">
          <template #default="{ row }">
            ¥{{ formatCurrency(row.sampleFee) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="taxAmount" label="含税" width="100" align="right">
          <template #default="{ row }">
            ¥{{ formatCurrency(row.taxAmount) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="totalAmount" label="合计金额" width="120" align="right">
          <template #default="{ row }">
            <span class="amount-text">
              ¥{{ formatCurrency(row.totalAmount) }}
            </span>
          </template>
        </el-table-column>
        
        <el-table-column prop="deliveryDate" label="出货日期" width="110" align="center" />
        
        <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
        
        <!-- 入库记录特有字段 -->
        <el-table-column 
          prop="totalInboundQuantity" 
          label="已入库总数" 
          width="120" 
          align="right"
          fixed="right"
        >
          <template #default="{ row }">
            <span class="inbound-quantity">
              {{ row.totalInboundQuantity }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  getInboundRecordList,
  exportInboundRecords,
  getSupplierOptions,
  searchSuppliers
} from '@/api/warehouse'
import { 
  getEmployeeOptions,
  searchEmployees
} from '@/api/quote'

// 响应式数据
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const tableData = ref([])

// 搜索表单
const searchForm = reactive({
  customerCode: '',
  productName: '',
  materialCode: '',
  salesperson: '',
  isTaxIncluded: '',
  customerName: '',
  deliveryDateRange: [],
  supplier: ''
})

// 选项数据
const salespersonOptions = ref([])
const supplierOptions = ref([])

// 搜索状态
const salespersonLoading = ref(false)
const supplierLoading = ref(false)

// 模拟测试数据
const mockData = [
  {
    id: 1,
    orderDate: '2024-12-18',
    customerCode: 'CUS001',
    salesperson: '张业务员',
    isTaxIncluded: true,
    orderArea: 15.8,
    pricePerSquareMeter: 180.00,
    internalCode: 'PCB240001',
    outsourceSupplier: '华南电路',
    productName: '4层PCB主板',
    materialCode: 'PCB4L001',
    purchaseOrderNo: 'PO202412180001',
    layerCount: '4层',
    boardThickness: '1.6mm',
    surfaceTreatment: '无铅喷锡',
    solderMask: '绿油',
    silkscreen: '白字',
    substrate: 'FR4',
    deliverySize: '100*80*1.6',
    panelization: '1*1',
    innerCopper: '1oz',
    outerCopper: '1oz',
    viaProcess: '机械钻孔',
    testing: '飞针测试',
    testFixtureFee: 150.00,
    urgent: false,
    quantity: 1000,
    unitPrice: 8.50,
    sampleFee: 200.00,
    taxAmount: 960.00,
    totalAmount: 8700.00,
    deliveryDate: '2024-12-25',
    remark: '常规订单',
    totalInboundQuantity: 1000
  },
  {
    id: 2,
    orderDate: '2024-12-19',
    customerCode: 'CUS002',
    salesperson: '李业务员',
    isTaxIncluded: true,
    orderArea: 8.4,
    pricePerSquareMeter: 220.00,
    internalCode: 'PCB240002',
    outsourceSupplier: '深圳电路',
    productName: '6层HDI板',
    materialCode: 'PCB6L002',
    purchaseOrderNo: 'PO202412190001',
    layerCount: '6层',
    boardThickness: '2.0mm',
    surfaceTreatment: '沉金',
    solderMask: '绿油',
    silkscreen: '白字',
    substrate: 'FR4',
    deliverySize: '60*50*2.0',
    panelization: '2*2',
    innerCopper: '0.5oz',
    outerCopper: '1oz',
    viaProcess: 'HDI盲埋孔',
    testing: 'ICT测试',
    testFixtureFee: 300.00,
    urgent: true,
    quantity: 500,
    unitPrice: 15.80,
    sampleFee: 0.00,
    taxAmount: 894.00,
    totalAmount: 8194.00,
    deliveryDate: '2024-12-28',
    remark: '加急订单',
    totalInboundQuantity: 300
  },
  {
    id: 3,
    orderDate: '2024-12-19',
    customerCode: 'CUS003',
    salesperson: '王业务员',
    isTaxIncluded: false,
    orderArea: 12.5,
    pricePerSquareMeter: 150.00,
    internalCode: 'PCB240003',
    outsourceSupplier: '东莞电路',
    productName: '2层LED驱动板',
    materialCode: 'PCB2L003',
    purchaseOrderNo: 'PO202412190002',
    layerCount: '2层',
    boardThickness: '1.2mm',
    surfaceTreatment: '化锡',
    solderMask: '白油',
    silkscreen: '黑字',
    substrate: 'CEM-1',
    deliverySize: '80*60*1.2',
    panelization: '1*1',
    innerCopper: '',
    outerCopper: '1oz',
    viaProcess: '机械钻孔',
    testing: '无',
    testFixtureFee: 0.00,
    urgent: false,
    quantity: 2000,
    unitPrice: 3.20,
    sampleFee: 100.00,
    taxAmount: 0.00,
    totalAmount: 6500.00,
    deliveryDate: '2024-12-30',
    remark: '量产订单',
    totalInboundQuantity: 1500
  },
  {
    id: 4,
    orderDate: '2024-12-17',
    customerCode: 'CUS004',
    salesperson: '赵业务员',
    isTaxIncluded: true,
    orderArea: 6.2,
    pricePerSquareMeter: 280.00,
    internalCode: 'PCB240004',
    outsourceSupplier: '珠海电路',
    productName: '8层服务器板',
    materialCode: 'PCB8L004',
    purchaseOrderNo: 'PO202412170001',
    layerCount: '8层',
    boardThickness: '3.2mm',
    surfaceTreatment: '沉金',
    solderMask: '绿油',
    silkscreen: '白字',
    substrate: 'FR4',
    deliverySize: '200*150*3.2',
    panelization: '1*1',
    innerCopper: '0.5oz',
    outerCopper: '1oz',
    viaProcess: '激光钻孔',
    testing: 'FCT测试',
    testFixtureFee: 500.00,
    urgent: false,
    quantity: 200,
    unitPrice: 28.60,
    sampleFee: 300.00,
    taxAmount: 648.00,
    totalAmount: 6020.00,
    deliveryDate: '2024-12-26',
    remark: '高密度板',
    totalInboundQuantity: 200
  },
  {
    id: 5,
    orderDate: '2024-12-16',
    customerCode: 'CUS005',
    salesperson: '周业务员',
    isTaxIncluded: false,
    orderArea: 18.5,
    pricePerSquareMeter: 120.00,
    internalCode: 'PCB240005',
    outsourceSupplier: '中山电路',
    productName: '单层跳线板',
    materialCode: 'PCB1L005',
    purchaseOrderNo: 'PO202412160001',
    layerCount: '1层',
    boardThickness: '0.8mm',
    surfaceTreatment: '无铅喷锡',
    solderMask: '无',
    silkscreen: '无',
    substrate: 'FR4',
    deliverySize: '150*100*0.8',
    panelization: '2*3',
    innerCopper: '',
    outerCopper: '1oz',
    viaProcess: '机械钻孔',
    testing: '无',
    testFixtureFee: 0.00,
    urgent: false,
    quantity: 5000,
    unitPrice: 1.80,
    sampleFee: 0.00,
    taxAmount: 0.00,
    totalAmount: 9000.00,
    deliveryDate: '2024-12-24',
    remark: '简单订单',
    totalInboundQuantity: 5000
  }
]

// 计算属性
const searchParams = computed(() => {
  const params = {
    page: currentPage.value,
    size: pageSize.value
  }
  
  // 添加搜索条件
  Object.keys(searchForm).forEach(key => {
    if (searchForm[key] !== '' && searchForm[key] !== null) {
      if (key === 'deliveryDateRange' && searchForm[key].length === 2) {
        params.startDate = searchForm[key][0]
        params.endDate = searchForm[key][1]
      } else if (key !== 'deliveryDateRange') {
        params[key] = searchForm[key]
      }
    }
  })
  
  return params
})

// 格式化货币
const formatCurrency = (amount) => {
  if (!amount && amount !== 0) return '0.00'
  return Number(amount).toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

// 格式化面积
const formatArea = (area) => {
  if (!area && area !== 0) return '0.00'
  return Number(area).toFixed(2) + ' m²'
}

// 业务员搜索方法
const handleSalespersonSearch = async (query) => {
  if (!query || query.trim() === '') {
    await loadSalespersonOptions()
    return
  }
  
  salespersonLoading.value = true
  try {
    const response = await searchEmployees(query.trim())
    if (response.code === 200 && response.data) {
      if (response.data.records) {
        salespersonOptions.value = response.data.records.map(item => ({
          value: item.employeeName,
          label: item.employeeName
        }))
      } else if (Array.isArray(response.data)) {
        salespersonOptions.value = response.data.map(item => ({
          value: item.employeeName,
          label: item.employeeName
        }))
      }
    }
  } catch (error) {
    console.error('搜索业务员失败:', error)
    // 使用默认数据
    salespersonOptions.value = [
      { value: '张业务员', label: '张业务员' },
      { value: '李业务员', label: '李业务员' },
      { value: '王业务员', label: '王业务员' }
    ]
  } finally {
    salespersonLoading.value = false
  }
}

// 供应商搜索方法
const handleSupplierSearch = async (query) => {
  if (!query || query.trim() === '') {
    await loadSupplierOptions()
    return
  }
  
  supplierLoading.value = true
  try {
    const response = await searchSuppliers(query.trim())
    if (response.code === 200 && response.data) {
      if (response.data.records) {
        supplierOptions.value = response.data.records.map(item => ({
          value: item.supplierName,
          label: item.supplierName
        }))
      } else if (Array.isArray(response.data)) {
        supplierOptions.value = response.data.map(item => ({
          value: item.supplierName,
          label: item.supplierName
        }))
      }
    }
  } catch (error) {
    console.error('搜索供应商失败:', error)
    // 使用默认数据
    supplierOptions.value = [
      { value: '华南电路', label: '华南电路' },
      { value: '深圳电路', label: '深圳电路' },
      { value: '东莞电路', label: '东莞电路' }
    ]
  } finally {
    supplierLoading.value = false
  }
}

// 加载业务员选项
const loadSalespersonOptions = async (keyword = '') => {
  try {
    const response = await getEmployeeOptions(keyword)
    if (response.code === 200 && response.data) {
      if (response.data.records) {
        salespersonOptions.value = response.data.records.map(item => ({
          value: item.employeeName,
          label: item.employeeName
        }))
      } else if (Array.isArray(response.data)) {
        salespersonOptions.value = response.data.map(item => ({
          value: item.employeeName,
          label: item.employeeName
        }))
      }
    }
  } catch (error) {
    console.error('加载业务员选项失败:', error)
    // 使用默认数据
    salespersonOptions.value = [
      { value: '张业务员', label: '张业务员' },
      { value: '李业务员', label: '李业务员' },
      { value: '王业务员', label: '王业务员' },
      { value: '赵业务员', label: '赵业务员' },
      { value: '周业务员', label: '周业务员' }
    ]
  }
}

// 加载供应商选项
const loadSupplierOptions = async (keyword = '') => {
  try {
    const response = await getSupplierOptions(keyword)
    if (response.code === 200 && response.data) {
      if (response.data.records) {
        supplierOptions.value = response.data.records.map(item => ({
          value: item.supplierName,
          label: item.supplierName
        }))
      } else if (Array.isArray(response.data)) {
        supplierOptions.value = response.data.map(item => ({
          value: item.supplierName,
          label: item.supplierName
        }))
      }
    }
  } catch (error) {
    console.error('加载供应商选项失败:', error)
    // 使用默认数据
    supplierOptions.value = [
      { value: '华南电路', label: '华南电路' },
      { value: '深圳电路', label: '深圳电路' },
      { value: '东莞电路', label: '东莞电路' },
      { value: '珠海电路', label: '珠海电路' },
      { value: '中山电路', label: '中山电路' }
    ]
  }
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    // 调用后端API获取入库记录列表
    const response = await getInboundRecordList(searchParams.value)
    
    if (response.code === 200) {
      tableData.value = response.data.records || []
      total.value = response.data.total || 0
      currentPage.value = response.data.current || 1
      pageSize.value = response.data.size || 20
    } else {
      ElMessage.error(response.message || '获取入库记录列表失败')
    }
  } catch (error) {
    console.error('获取入库记录列表失败:', error)
    ElMessage.error('获取入库记录列表失败，使用模拟数据')
    
    // 发生错误时使用模拟数据
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 应用搜索过滤
    let filteredData = [...mockData]
    
    // 添加搜索过滤逻辑
    if (searchForm.customerCode) {
      filteredData = filteredData.filter(item => 
        item.customerCode.toLowerCase().includes(searchForm.customerCode.toLowerCase())
      )
    }
    
    if (searchForm.productName) {
      filteredData = filteredData.filter(item => 
        item.productName.toLowerCase().includes(searchForm.productName.toLowerCase())
      )
    }
    
    if (searchForm.materialCode) {
      filteredData = filteredData.filter(item => 
        item.materialCode.toLowerCase().includes(searchForm.materialCode.toLowerCase())
      )
    }
    
    if (searchForm.salesperson) {
      filteredData = filteredData.filter(item => 
        item.salesperson === searchForm.salesperson
      )
    }
    
    if (searchForm.isTaxIncluded !== '') {
      filteredData = filteredData.filter(item => 
        item.isTaxIncluded === Boolean(searchForm.isTaxIncluded)
      )
    }
    
    // 模拟分页
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    tableData.value = filteredData.slice(start, end)
    total.value = filteredData.length
  } finally {
    loading.value = false
  }
}

// 事件处理函数
const handleSearch = () => {
  currentPage.value = 1
  loadData()
}

const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    if (key === 'deliveryDateRange') {
      searchForm[key] = []
    } else {
      searchForm[key] = ''
    }
  })
  currentPage.value = 1
  loadData()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadData()
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  loadData()
}

// 导出数据
const handleExport = async () => {
  try {
    const response = await exportInboundRecords(searchParams.value)
    
    // 创建下载链接
    const blob = new Blob([response], { 
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `入库记录_${new Date().toISOString().slice(0, 10)}.xlsx`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败，请检查网络连接')
  }
}

// 加载基础数据
const loadBaseData = async () => {
  try {
    await Promise.all([
      loadSalespersonOptions(),
      loadSupplierOptions()
    ])
  } catch (error) {
    console.error('加载基础数据失败:', error)
  }
}

// 页面初始化
onMounted(async () => {
  await loadBaseData()
  loadData()
})
</script>

<style scoped>
.inbound-record-container {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-card {
  border-radius: 6px;
  flex-shrink: 0;
}

.search-card :deep(.el-card__body) {
  padding: 16px;
}

.search-form {
  margin-bottom: 0;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 12px;
  margin-right: 16px;
}

.table-card {
  border-radius: 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-card :deep(.el-card__body) {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-actions {
  display: flex;
  gap: 8px;
}

.amount-text {
  font-weight: 600;
  color: #e6a23c;
}

.inbound-quantity {
  font-weight: 600;
  color: #67c23a;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}
</style> 